﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点点滴滴</title>
 <link rel="icon" type="image/x-icon" href="images/2.png">
<link rel="stylesheet"	href="css/bootstrap.min.css" type="text/css" media="all" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<style type="text/css">
		
			.tcopyright {
				width: 960px;/*图片的宽度*/
				margin: 0 auto;/*居中设置*/
				padding: 8px 0;/*内边距*/
				font-size: 12px;
				line-height: 28px;
				color: #333;
				text-align: center;
				overflow: hidden;
				clear: both;
			}
			
			.tcopyright .en {
				font-family: Arial;
			}
			
			.tcopyright a {
				color: #333;
				text-decoration: none;
			}
			
			.tcopyright a:hover {
				color: #bd0a01;
				text-decoration: underline;/*下划线*/
			}
		</style>
		              <script language="javascript"> 

document.oncontextmenu=new Function("return false") 
document.onselectstart=new Function("return false") 


</script>
</head>
<body>

<script src="js/polyfill.min.js"></script>
<div>
<div id="hero-slides">

  <div id="header">

    <div id="menu">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">洋芋❤佩珊</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="lovecps.html">LOVE
                
              </a>
            </li>
              <li class="nav-item">
              <a class="nav-link" href="love.html">ASK LOVE</a>
            </li>
           
             <li class="nav-item">
              <a class="nav-link" href="#">我❤她</a>
            </li>                    
          </ul>
        </div>
      </div>
    </nav>
    </div>
  </div>
  <div id="slides-cont">
    <div class="button" id="next"></div>
    <div class="button" id="prev"></div>
    <div id="slides">
      <div class="slide" style="background-image: url(img/1.jpg);">
        <div class="number">01</div>
        <div class="body">
          <div class="location">熙街，天台</div>
          <div class="headline">第一次接吻，甜甜的感觉</div> 
          <div class="link">有些害羞，心里乐开花</div>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/2.jpg);">
        <div class="number">02</div>
        <div class="body">
          <div class="location">情人坡</div>
          <div class="headline">第一次那么多人一路出去</div><a href="#">
            <div class="link">我紧紧的拉着手，怕走丢了</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/3.jpeg);">
        <div class="number">03</div>
        <div class="body">
          <div class="location">情人坡</div>
          <div class="headline">暖和的午后</div><a href="#">
            <div class="link">最美的佩珊</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/4.jpg);">
        <div class="number">04</div>
        <div class="body">
          <div class="location">清吧</div>
          <div class="headline">斗牛士和彩虹的碰撞</div><a href="#">
            <div class="link">我❤她</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/5.jpg);">
        <div class="number">05</div>
        <div class="body">
          <div class="location">悠闲的下午</div>
          <div class="headline">像个小孩子</div><a href="#">
            <div class="link">傻傻的她，蠢蠢的我</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/6.jpg);">
        <div class="number">06</div>
        <div class="body">
          <div class="location">布丁烤奶</div>
          <div class="headline">我想和你走下去</div><a href="#">
            <div class="link">一次留言</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/7.jpg);">
        <div class="number">07</div>
        <div class="body">
          <div class="location">便利店</div>
          <div class="headline">可爱又不失优雅</div><a href="#">
            <div class="link">不要太可爱</div></a>
        </div>
      </div>
        <div class="slide" style="background-image: url(img/8.jpg);">
        <div class="number">08</div>
        <div class="body">
          <div class="location">恐高的她</div>
          <div class="headline">傻傻的眼神</div><a href="#">
            <div class="link">痴痴的她，呆呆的我</div></a>
        </div>
      </div>
        <div class="slide" style="background-image: url(img/9.jpg);">
        <div class="number">09</div>
        <div class="body">
          <div class="location">三原色里的她</div>
          <div class="headline">最萌的她</div><a href="#">
            <div class="link">心跳的感觉</div></a>
        </div>
      </div>
        <div class="slide" style="background-image: url(img/10.jpg);">
        <div class="number">10</div>
        <div class="body">
          <div class="location">纯k</div>
          <div class="headline">一下午的k歌</div><a href="#">
            <div class="link">第一次k歌，逗比的我们</div></a>
        </div>
      </div>
       <div class="slide" style="background-image: url(img/11.jpg);">
        <div class="number">11</div>
        <div class="body">
          <div class="location">故事还在继续</div>
          <div class="headline">未完待续。。。。</div><a href="#">
            <div class="link">以后的我们</div></a>
        </div>
      </div>
    </div>
    <div id="next-catch"></div>
    <div id="prev-catch"></div>
  </div>
  <embed src="music/circulation.mp3" autostart="true" loop="true" hidden="true"></embed>
</div>
	<div id="tcopyright" class="tcopyright" bossZone="footer" role="contentinfo">
			<div>
				<a href="lovecps.html">LOVE</a> |
				<a href="love.html" >ASK LOVE</a> |
				<a href="#" >我❤她</a>
				<div class="en">杨玉印❤佩珊版权所有Copyright &copy;2019 . for--佩珊</div>
				
			</div>
		</div>
		</div>
<script>
let hero = document.getElementById('hero-slides');
let menu = document.getElementById('menu');
let slides = document.getElementById('slides');
let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
let slideChildren = slides.children;
let slideCount = slides.children.length;
let currentlyDemoing = false;
let currentPage = 0;
let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
let maxPageCount = () => slideCount / slidesPerPage() - 1;

function goToPage(pageNumber = 0) {
	currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
	
	hero.style.setProperty('--page', currentPage);
}

function sleep(time) {
	return new Promise(res => setTimeout(res, time));
}

function hoverSlide(index) {
	index in slideChildren &&
		slideChildren[index].classList.add('hover');
}

function unhoverSlide(index) {
	index in slideChildren &&
		slideChildren[index].classList.remove('hover');
}

async function demo() {
	if(currentlyDemoing) {
		return;
	}
	currentlyDemoing = true;
	if(currentPage !== 0) {
		goToPage(0);
		await sleep(800);
	}
	let slides = slidesPerPage();
	let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
	let pageSeq = pageSeq_[slides] || pageSeq_[4];
	let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
	let slideSeq = slideSeq_[slides] || slideSeq_[2];
	await sleep(300);
	goToPage(pageSeq[0]);
	await sleep(500);
	hoverSlide(slideSeq[0]);
	await sleep(1200);
	goToPage(pageSeq[1]);
	unhoverSlide(slideSeq[0]);
	await sleep(500);
	hoverSlide(slideSeq[1]);
	await sleep(1200);
	goToPage(pageSeq[2]);
	unhoverSlide(slideSeq[1]);
	await sleep(300);
	hoverSlide(slideSeq[2]);
	await sleep(1600);
	goToPage(0);
	unhoverSlide(slideSeq[2]);
	currentlyDemoing = false;
}

next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
menu.addEventListener('click', demo);

sleep(100).then(demo);


</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  <audio id="bgmMusic" src="music/circulation.mp3" autoplay="autoplay" loop="loop" preload="auto"
                        type="audio/mp3">
                        </audio>
</div>
</body>
</html>